<template>
  <div class="message-container">
    <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
      <li v-for="(item, index) in messages" :key="index" class="infinite-list-item">
        <span class="message-time">
          <p class="timeDesc">{{ item.timestamp }}</p>
        </span>
        <div class="message-item">
          <div v-if="item.tip">
            
            <el-image src="/src/assets/images/fileIcon/Authorization.png" style="width: 24px; height: 24px;"></el-image>

          </div>
          <div v-else>
            <el-icon color="#C6E2FF">
              <BellFilled />
            </el-icon>
          </div>
          <div class="message-content">
            <span class="message-type">{{ item.type }}</span>
            <p class="message-detail">{{ item.content }}</p>
            <div class="message-tip" v-if="item.tip">
              <p class="tipDesc">{{ item.tip }}</p>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <!-- 消息列表 -->

  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
const load = () => {
  count.value += 2
}
// 模拟消息数据
const messages = ref([
  {
    timestamp: '205-05-30 16:55:45',
    type: '授权申请',
    tip: '文件正在完善中，请稍后再申请',
    content: '张志强 申请“销售二部文件夹”的授权'
  },
  {
    timestamp: '205-05-30 16:55:45',
    type: '系统消息',
    content: '公司通知全员，明天集团放假'
  },
  {
    timestamp: '205-05-30 16:55:45',
    type: '授权申请',
    content: '张志强 申请“销售二部文件夹”的授权'
  },
  {
    timestamp: '205-05-30 16:55:45',
    type: '系统消息',
    content: '公司通知全员，明天集团放假'
  },
  {
    timestamp: '205-05-30 16:55:45',
    type: '授权申请',
    content: '张志强 申请“销售二部文件夹”的授权'
  },
  {
    timestamp: '205-05-30 16:55:45',
    type: '系统消息',
    content: '公司通知全员，明天集团放假'
  },
  {
    timestamp: '205-05-30 16:55:45',
    type: '授权申请',
    content: '张志强 申请“销售二部文件夹”的授权'
  },
  {
    timestamp: '205-05-30 16:55:45',
    type: '系统消息',
    content: '公司通知全员，明天集团放假'
  },
  // 更多消息...
])
</script>

<style scoped>
.infinite-list {
  height: 450px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list .infinite-list-item {
  display: flex;
  margin: 0 10px 10px 0px;
  flex-direction: column;
  margin-left: 16px;
}

.infinite-list .infinite-list-item+.list-item {
  margin-top: 10px;
}

.message-container {
  padding: 0 20px 20px 0px;
}

.message-item {
  display: flex;
  align-items: center;
}

.message-content {
  margin-left: 10px;
  width: 100%;
}

.message-type {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #909399;
}

.message-detail {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #303133;
}

.message-tip {
  background: #FCF6EC;
  border-radius: 4px 4px 4px 4px;
  width: 100%;
}

.tipDesc {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #303133;
  line-height: 22px;
}

.message-time {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #606266;
  line-height: 20px;
  background: #F2F3F5;
  border-radius: 4px 4px 4px 4px;
}

.timeDesc {
  margin-left: 16px;

}
</style>